<template>
  <div
    class="w-full h-full overflow-y-auto scrollbar-thumb-gray-400 scrollbar-track-gray-100 scrollbar-thin flex"
  >
    <div class="w-64 bg-white rounded-md shadow-md p-4 box-border">
      <h class="font-bold">下沉地道:</h>
      <div class="mt-6">
        <el-menu default-active="1" :unique-opened="true" @open="handleOpen" @close="handleClose">
          <el-sub-menu v-for="(item, index) in menu" :key="item.id" :index="item.street">
            <template #title>
              <span>{{ item.street }}</span>
            </template>
            <el-menu-item
              v-for="(tunnel, index) in item.children"
              :key="tunnel"
              :index="tunnel"
              @click="menuItemClick"
              >{{ tunnel }}</el-menu-item
            >
          </el-sub-menu>
        </el-menu>
      </div>
    </div>
    <div class="w-mainWidth bg-white ml-4 rounded-md shadow-md box-border">
      <div class="p-6">
        <el-table
          ref="tableRef"
          :data="tableData"
          border
          style="width: 50%"
          :header-cell-style="{
            background: 'rgba(228,228,228,0.37)',
            color: '#3D3D3D',
            fontSize: '16px'
          }"
        >
          <el-table-column type="index" label="order" align="center" width="160px">
          </el-table-column>
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="address" label="Address" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
const menu = ref([
  { id: 1, street: '南苑街道1', children: ['人民路隧道1', '南大街下穿道2'] },
  {
    id: 2,
    street: '南苑街道2',
    children: ['人民路隧道3', '南大街下穿道4']
  },
  {
    id: 3,
    street: '南苑街道3',
    children: ['人民路隧道5', '南大街下穿道6']
  },
  {
    id: 4,
    street: '南苑街道4',
    children: ['人民路隧道7', '南大街下穿道8']
  },
  {
    id: 5,
    street: '南苑街道5',
    children: ['人民路隧道9', '南大街下穿道10']
  }
])
const handleOpen = (index) => {
  //   console.log('打开菜单' + index)
}
const handleClose = (index) => {
  //   console.log('关闭菜单' + index)
}
const menuItemClick = (item) => {
  //   console.log(e.index)
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
</script>

<style lang="scss" scoped>
:deep(.el-menu-item) {
  margin-left: 20px;
}
</style>
